<template>
    <div>
        <!--取消-->
        <div id="body" @click="showList">
            <!--有数据展示-->
            <div v-show="list.length!=0">
                <div id="title2">
                    <strong>已取消事项({{ list.length }})</strong>
                </div>
            </div>
            <!--没数据展示-->
            <div id="title2" v-show="list.length==0"><strong>已取消事项(0)</strong></div>
            <img  :class="{im2:imgStatus,im:!imgStatus}" src="../assets/three.png">
        </div>
        <ul id="ulist" v-if="list.length!=0  && imgStatus" >
            <li v-for="(item,index) in list" :key="index">
                <span>{{ item.name }}</span><span @click="upl(item.id)" class="bthf">恢复</span>
            </li>
        </ul>
    </div>
</template>

<script>
export default {
    data() {
        return {
            imgStatus:false
        }
    },
    props: {
        list: Array
    },
    created() {

    },
    methods: {
        showList() {
            // 更改图片角度
            this.imgStatus = !this.imgStatus
        },
        upl(id) {
            this.$emit("upl", id)
            if (this.list.length == 0){
                this.imgStatus=false
            }
        }
    }
}
</script>

<style>
#body {
    position: relative;
    width: 400px;
    height: 50px;
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 5px;
    margin: 10px auto;
    box-shadow: 0 0 10px #ccc;
}

#title2 {
    width: 100%;
    height: 100%;
    text-align: left;
    line-height: 50px;
    font-size: 16px;
    color: #333;
    padding-left: 10px;
}

.im {
    width: 20px;
    height: 20px;
    position: absolute;
    right: 15px;
    top: 15px;
    transform: rotate(-30deg);
}
.im2 {
    width: 20px;
    height: 20px;
    position: absolute;
    right: 15px;
    top: 15px;
    transform: rotate(60deg);
}
#ulist{
    width: 300px;
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 5px;
    margin: 10px auto;
    box-shadow: 0 0 10px #ccc;
    padding: 0;
}
#ulist li{
    width: 100%;
    height: 40px;
    line-height: 40px;
    text-align: left;
    padding-left: 10px;
    border-bottom: 1px solid #ccc;
    list-style: none;
}
.bthf{
    display: inline-block;
    background-color: #42b983;
    height: 20px;
    line-height: 20px;
    padding: 0 10px;
    border-radius: 5px;
    color: #fff;
    margin-left: 20px;

}
</style>